import {
  AlipayOutlined,
  LockOutlined,
  LoginOutlined,
  TaobaoOutlined,
  UserOutlined,
  WeiboOutlined,
} from '@ant-design/icons';
import { LoginFormPage, ProConfigProvider, ProFormCheckbox, ProFormText } from '@ant-design/pro-components';
import { Button, Divider, message, Space, Spin, theme } from 'antd';
import { CSSProperties, Fragment, useState } from 'react';
import { AccessTokenConstant, getCurrentUser, login, loginStorage } from '@/pages/user/login/service';
import { useNavigate } from 'umi';
import { isResponseSuccess } from '@/utils/util';

const iconStyles: CSSProperties = {
  color: 'rgba(0, 0, 0, 0.2)',
  fontSize: '18px',
  verticalAlign: 'middle',
  cursor: 'pointer',
};

const Page = () => {
  const [ loading, setLoading ] = useState<boolean>(false);
  const [ loadUserStatus, setLoadUserStatus ] = useState<boolean>(false);
  const { token } = theme.useToken();
  const navigate = useNavigate();

  return (
    <Fragment>
      <Spin spinning={ loadUserStatus } fullscreen={ true } tip="登录成功，加载用户资源，请稍后"></Spin>
      <div
        hidden={ loadUserStatus }
        style={ {
          backgroundColor: 'white',
          height: '100vh',
        } }
      >
        <LoginFormPage
          backgroundImageUrl="https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp"
          logo="https://github.githubassets.com/favicons/favicon.png"
          backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
          title="Github"
          containerStyle={ {
            backgroundColor: 'rgba(0, 0, 0,0.65)',
            backdropFilter: 'blur(4px)',
          } }
          subTitle="全球最大的代码托管平台"
          submitter={ {
            render: (submitterProps, dom) => {
              const { form } = submitterProps;
              return (
                <Button
                  { ... dom[1].props }
                  icon={ <LoginOutlined /> }
                  loading={ loading }
                  onClick={ () => {
                    form?.validateFields().then((values) => {
                      setLoading(true);
                      login(values)
                        .then((response) => {
                          if (isResponseSuccess(response)) {
                            message.success('登录成功');
                            const { data, additional } = response;


                            loginStorage.set(AccessTokenConstant.name, data);

                            loginStorage.set(AccessTokenConstant.id, additional?.id);
                            loginStorage.set(AccessTokenConstant.access, additional?.access);
                            loginStorage.set(AccessTokenConstant.refresh, additional?.refresh);
                            loginStorage.set(AccessTokenConstant.remark, additional?.remark);

                            setLoadUserStatus(true);
                            setTimeout(() => {
                              getCurrentUser().then(response => {
                                if (isResponseSuccess(response)) {
                                  message.success('获取用户资源成功');
                                  navigate('/', { replace: true });
                                } else {
                                  message.error(response?.message || '获取用户资源失败');
                                }
                              }).finally(() => setLoadUserStatus(false));
                            }, 1500);
                          } else {
                            message.error(response?.message || '登录失败');
                          }
                        })
                        .finally(() => setLoading(false));
                    });
                  } }
                />
              );
            },
          } }
          activityConfig={ {
            style: {
              boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.2)',
              color: token.colorTextHeading,
              borderRadius: 8,
              backgroundColor: 'rgba(255,255,255,0.25)',
              backdropFilter: 'blur(4px)',
            },
            title: '活动标题，可配置图片',
            subTitle: '活动介绍说明文字',
            action: (
              <Button
                size="large"
                style={ {
                  borderRadius: 20,
                  background: token.colorBgElevated,
                  color: token.colorPrimary,
                  width: 120,
                } }
              >
                去看看
              </Button>
            ),
          } }
          actions={
            <div
              style={ {
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                flexDirection: 'column',
              } }
            >
              <Divider plain>
              <span
                style={ {
                  color: token.colorTextPlaceholder,
                  fontWeight: 'normal',
                  fontSize: 14,
                } }
              >
                其他登录方式
              </span>
              </Divider>
              <Space align="center" size={ 24 }>
                <div
                  style={ {
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    flexDirection: 'column',
                    height: 40,
                    width: 40,
                    border: '1px solid ' + token.colorPrimaryBorder,
                    borderRadius: '50%',
                  } }
                >
                  <AlipayOutlined style={ { ... iconStyles, color: '#1677FF' } } />
                </div>
                <div
                  style={ {
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    flexDirection: 'column',
                    height: 40,
                    width: 40,
                    border: '1px solid ' + token.colorPrimaryBorder,
                    borderRadius: '50%',
                  } }
                >
                  <TaobaoOutlined style={ { ... iconStyles, color: '#FF6A10' } } />
                </div>
                <div
                  style={ {
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    flexDirection: 'column',
                    height: 40,
                    width: 40,
                    border: '1px solid ' + token.colorPrimaryBorder,
                    borderRadius: '50%',
                  } }
                >
                  <WeiboOutlined style={ { ... iconStyles, color: '#1890ff' } } />
                </div>
              </Space>
            </div>
          }
        >
          <ProFormText
            name="username"
            fieldProps={ {
              size: 'large',
              prefix: (
                <UserOutlined
                  style={ {
                    color: token.colorText,
                  } }
                  className={ 'prefixIcon' }
                />
              ),
            } }
            placeholder={ '请输入账号' }
            rules={ [
              {
                required: true,
                message: '账号不能为空',
              },
            ] }
          />
          <ProFormText.Password
            name="password" allowClear
            fieldProps={ {
              size: 'large',
              prefix: (
                <LockOutlined
                  style={ {
                    color: token.colorText,
                  } }
                  className={ 'prefixIcon' }
                />
              ),
            } }
            placeholder={ '请输入密码' }
            rules={ [
              {
                required: true,
                message: '密码不能为空',
              },
            ] }
          />
          <div
            style={ {
              marginBlockEnd: 24,
            } }
          >
            <ProFormCheckbox noStyle name="autoLogin">
              自动登录
            </ProFormCheckbox>
            <a
              style={ {
                float: 'right',
              } }
            >
              忘记密码
            </a>
          </div>
        </LoginFormPage>
      </div>
    </Fragment>
  );
};

export default () => {
  return (
    <ProConfigProvider dark>
      <Page />
    </ProConfigProvider>
  );
};
